<template>
  <div class="">
     <el-form ref="deptRef" :inline="true" :model="dataForm" :rules="rules">
       <el-form-item prop="name">
         <el-input v-model="dataForm.name" class="input" placeholder="科室名称" clearable></el-input>
       </el-form-item>

       <el-form-item prop="outpatient">
         <el-select v-model="dataForm.outpatient" class="input" placeholder="科室类型" clearable>
           <el-option label="门诊" :value="true"></el-option>
           <el-option label="非门诊" :value="false"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item  prop="recommended">
         <el-select v-model="dataForm.recommended" class="input" placeholder="推荐级别" clearable>
           <el-option label="优先" :value="true"></el-option>
           <el-option label="非优先" :value="false"></el-option>
         </el-select>
       </el-form-item>

       <el-form-item>
         <el-button type="primary" @click="searchDept">查询</el-button>
         <el-button type="primary" @click="open">新增</el-button>
         <el-button type="danger">批量删除</el-button>
       </el-form-item>
     </el-form>

    <!--table 表格 -->
    <el-table :data="tableData" style="width: 100%" border >
      <!-- 方框勾选 -->
      <el-table-column type="selection" :selectable="selectable" width="50" header-align="center"  align="center" />
      <!-- 序号 -->
      <el-table-column type="index" width="100" label="序号 " header-align="center"  align="center"/>
      <el-table-column prop="name" label="科室名称" width="170" header-align="center"  align="center"/>
      <el-table-column prop="outpatient" label="科室类型" width="120" header-align="center"  align="center" />
      <el-table-column prop="subs" label="诊室数量" width="120" header-align="center"  align="center" >
        <template #default="scope">
          <span>{{scope.row.subs}}个</span>
        </template>
      </el-table-column>
      <el-table-column prop="doctors" label="医生数量" width="120" header-align="center"  align="center">
        <template #default="scope">
          <span>{{scope.row.doctors}}人</span>
        </template>
      </el-table-column>
      <el-table-column prop="recommended" label="优先推荐" width="120" header-align="center"  align="center" />
                                                                                                        <!-- 当介绍少的时候 就是向左对齐 不是居中 -->
      <el-table-column prop="description" :show-overflow-tooltip="true"	 label="科室介绍" width="430"  header-align="center"  align="left"/>
      <el-table-column label="操作" min-width="150">
        <template #default="scope">
          <el-button
              size="small"
              type="primary"
              text
          >修改</el-button>

          <el-button
              size="small"
              :type="scope.row.subs>0?'info':'primary'"
              text
              :disabled="scope.row.subs>0"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        class="pagination"
        v-model:current-page="dataForm.page"
        v-model:page-size="dataForm.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"

    />
    <DeptAddAndUpdate ref="deptInfoRef"></DeptAddAndUpdate>
  </div>

</template>

<script setup>
import {ref, reactive, onMounted, nextTick} from "vue";
import {selectDeptInfo} from '@/api/dept'
import DeptAddAndUpdate from './medicalDeptAddAndUpdate/index.vue'


// 点击 新增 调用函数
const open = () => {
  console.log("hhh")
  nextTick(() => {
    deptInfoRef.value.init()
  });
};

// 组件的实例化对象
let deptInfoRef = ref();

// 保存 接口传来的数据
const tableData = ref([]);


let dataForm =ref({
  "name": null,   //科室名称
  "outpatient": null,  // 科室类型
  "recommended": null,  // 推荐级别
  "page": 1,      // 当前页码
  "length": 10     // 每页展示的条数
})


// from 表单实例对象
let deptRef = ref();

// 表单校验
const rules = ref({
  name:[
    {required:false,pattern:'^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$' , message: '部门名称格式错误'}
  ]
})

// 接受后台传来的数据总量
const total = ref(0)

// 调用接口查询
const searchDept = async () => {
  if (!deptRef.value) return
  await deptRef.value.validate(async (valid, fields) => {
    if (valid) {
      if (dataForm.value.page < 0) {
        return;
      }
      // 查询接口的参数对象
      // 因为后端接口定义的规则是 字段如果没有值 （空字符串） 需要该成null 再进行产参

      // 这个是传参的改变  要将上面的 dataForm 的3个参数改成null
      // 但我觉得 我的这个也能实现 不需要改变参数  data
      /*      let data = ref({
              name: dataForm.value.name == '' ? null : dataForm.value.name,
              outpatient: dataForm.value.outpatient == '' ? null : dataForm.value.outpatient,
              recommended: dataForm.value.recommended == '' ? null : dataForm.value.recommended,
              page: dataForm.value.page,
              length:dataForm.value.length
            })*/


      let res = await selectDeptInfo(dataForm.value);
      res.result.list = res.result.list.map(item => {
        return {
          ...item,
          outpatient: item.outpatient ? '门诊' : '非门诊',
          recommended: item.recommended ? '优先' : '普通',
        };
      });
      tableData.value = res.result.list;
      console.log(res);
      total.value = res.result.totalCount;
    } else {
      console.log('error submit!', fields)
    }
  });
};

// 定义一个函数来控制 select选项的 disable  这个不能通过 disable 直接控制
const selectable = (row) => {
  // row 获取当前行的数据
  // console.log(row);

  if (row.subs > 0) {
    // 如果subs 数量大于0 不可选中
    return false;
  }
  return true;

};

// 切换每页显示条数时调用的函数
const handleSizeChange = (val) => {
  dataForm.value.length = val;
  dataForm.value.page = 1;
  searchDept()
};

// 点击页码切换时调用的函数
const handleCurrentChange = (val) => {
  dataForm.value.page = val;
  searchDept();
};

onMounted(() => {
  searchDept();
});

</script>

<style lang="scss" scoped>
.pagination{
  margin-top: 20px;
}
</style>